<template>
    <div :class="'player '+(zoom?'zoom':'')">
        <!-- <div class="cover">
            <img src="http://i0.hdslb.com/bfs/archive/8deada0a9861b42359a433fcf538bf8b70fa3a27.jpg@480w_270h_1c" width="100%" alt="">
        </div> -->
        <div class="wrap" @click="setToolShow">
            <div class="ended" v-show="ended">
                <span class="replay icon-replay" @click="replay">重新播放</span>
                <router-link class="next icon-xiayiqu" v-if="!last" :to='{query:{p:parseInt($route.query.p)+1}}'>下一P</router-link>
            </div>
            <span class="length" v-show="lengthshow">{{intToTime(fulllength?fulllength:length)}}</span>
            <video ref="video" :src='data.durl[0].url' :poster="poster" style="background-color:black"></video>
            <svg  class="preview" @click="play=true" v-show="!play" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="pid-39-svgo-a" d="M0 0h54v54H0z"></path><path d="M35.469 5.41a2.699 2.699 0 012.85 2.077 1.895 1.895 0 01-.185 1.362c-.05.09-.108.171-.166.254l-.174.247-.351.493c-.472.654-.955 1.3-1.454 1.934l-.01.013a162.636 162.636 0 014.04.231l1.11.083.554.045.277.023.139.011.07.006.077.008a7.779 7.779 0 012.483.658 7.873 7.873 0 013.703 3.467c.408.76.688 1.589.826 2.44.02.105.031.212.046.319l.01.08.01.076.014.139.057.555.107 1.111c.068.741.129 1.483.182 2.226.213 2.97.314 5.96.244 8.947a112.38 112.38 0 01-.57 8.919c-.007.086-.022.2-.035.306-.012.108-.03.215-.049.321l-.027.16-.034.159c-.023.106-.045.212-.074.316a7.94 7.94 0 01-1.842 3.394 7.9 7.9 0 01-4.483 2.446c-.107.017-.214.035-.321.049l-.322.036-.554.048-1.11.09c-.74.058-1.48.108-2.219.155-1.48.092-2.96.165-4.44.22-5.921.218-11.844.148-17.762-.204-.74-.044-1.479-.095-2.218-.149l-1.11-.087-.554-.046-.277-.024-.139-.012-.147-.014a7.807 7.807 0 01-2.497-.67 7.9 7.9 0 01-3.71-3.494 7.918 7.918 0 01-.821-2.449c-.017-.106-.035-.213-.045-.32l-.018-.161-.009-.08-.006-.07-.048-.555-.089-1.112a128.68 128.68 0 01-.148-2.227c-.173-2.97-.242-5.951-.174-8.932.066-2.978.25-5.948.532-8.908a7.864 7.864 0 012.051-4.614 7.82 7.82 0 014.436-2.405c.106-.016.21-.034.317-.047l.317-.034.554-.047 1.109-.088a154.233 154.233 0 014.487-.273l-.028-.035a59.498 59.498 0 01-1.454-1.934l-.351-.493-.174-.247c-.058-.083-.117-.165-.166-.254a1.896 1.896 0 01-.184-1.363 2.699 2.699 0 012.85-2.077 1.89 1.89 0 011.237.595c.07.075.13.156.19.237l.181.242.36.486c.476.651.94 1.31 1.39 1.981a45.03 45.03 0 011.678 2.683 231.804 231.804 0 017.029-.007c.122-.212.246-.422.37-.63.418-.695.854-1.375 1.303-2.046.45-.67.914-1.33 1.39-1.981l.36-.486.181-.242c.06-.081.12-.162.19-.237a1.89 1.89 0 011.238-.595zM20.366 22.632a2 2 0 00-.196.655 60.682 60.682 0 00-.416 7.208c0 2.174.106 4.347.318 6.52l.115 1.087a2 2 0 002.912 1.547 131.76 131.76 0 006.459-3.597 119.102 119.102 0 004.685-2.937l1.133-.757a2 2 0 00.029-3.292 91.839 91.839 0 00-5.847-3.78 99.132 99.132 0 00-5.407-2.994l-1.103-.558a2 2 0 00-2.682.898z" id="pid-39-svgo-d"></path><filter x="-19.6%" y="-20.7%" width="139.2%" height="141.3%" filterUnits="objectBoundingBox" id="pid-39-svgo-c"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix><feOffset in="SourceAlpha" result="shadowOffsetOuter2"></feOffset><feGaussianBlur stdDeviation="3" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="shadowMatrixOuter2"></feMergeNode></feMerge></filter></defs><g fill="none" fill-rule="evenodd" opacity=".812"><mask id="pid-39-svgo-b" fill="#fff"><use xlink:href="#pid-39-svgo-a"></use></mask><g mask="url(#pid-39-svgo-b)"><use fill="#000" filter="url(#pid-39-svgo-c)" xlink:href="#pid-39-svgo-d"></use><use fill="#FFF" xlink:href="#pid-39-svgo-d"></use></g></g></svg>
            <div class="tools" v-show="toolshow" @click="toolshow=false" >
                <span class="control icon-bofangqi-bofang iconfont" v-if='!play' @click="play=true"></span>
                <span class="control icon-bofangqi-zanting iconfont" v-if='play' @click="play=false"></span>
                <div class="timebar" ref='timebar' @click="spotmove">
                    <!-- <van-progress color="#fb7299" stroke-width="2" track-color='rgba(255,255,255,0.15)' :percentage="currentTime*100/length" :show-pivot='false'/> -->
                    <my-progress height="2px" :percentage='currentTime*100/length' color='#fb7299'></my-progress>
                    <svg class="spot" @mousedown="spot"  :style="'margin-left:'+currentTime*100/length+'%'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path d="M16.118 3.667h.382a3.667 3.667 0 013.667 3.667v7.333a3.667 3.667 0 01-3.667 3.667h-11a3.667 3.667 0 01-3.667-3.667V7.333A3.667 3.667 0 015.5 3.666h.382L4.95 2.053a1.1 1.1 0 011.906-1.1l1.567 2.714h5.156L15.146.953a1.101 1.101 0 011.906 1.1l-.934 1.614z" fill="#333"></path><path d="M5.561 5.194h10.878a2.2 2.2 0 012.2 2.2v7.211a2.2 2.2 0 01-2.2 2.2H5.561a2.2 2.2 0 01-2.2-2.2V7.394a2.2 2.2 0 012.2-2.2z" fill="#fff"></path><path d="M6.967 8.556a1.1 1.1 0 011.1 1.1v2.689a1.1 1.1 0 11-2.2 0V9.656a1.1 1.1 0 011.1-1.1zM15.033 8.556a1.1 1.1 0 011.1 1.1v2.689a1.1 1.1 0 11-2.2 0V9.656a1.1 1.1 0 011.1-1.1z" fill="#333"></path></svg>
                </div>
                <span class="current">{{intToTime(currentTime)}}/{{intToTime(length)}}</span>
                <span class="danmu">
                    <svg t="1606798870470" v-show="!danmu" @click="danmu=!danmu" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1838" width="200" height="200"><path d="M785.066667 597.333333C682.666667 597.333333 597.333333 682.666667 597.333333 785.066667c0 102.4 85.333333 187.733333 187.733334 187.733333 102.4 0 187.733333-85.333333 187.733333-187.733333 0-102.4-85.333333-187.733333-187.733333-187.733334z m119.466666 187.733334c0 25.6-8.533333 46.933333-21.333333 68.266666l-170.666667-170.666666c21.333333-12.8 42.666667-21.333333 68.266667-21.333334 72.533333 0 123.733333 55.466667 123.733333 123.733334z m-243.2 0c0-21.333333 4.266667-38.4 12.8-55.466667l162.133334 162.133333c-17.066667 8.533333-34.133333 12.8-55.466667 12.8-64 0-119.466667-51.2-119.466667-119.466666zM674.133333 452.266667h-51.2v38.4h51.2v-38.4z m-98.133333 0h-51.2v38.4h51.2v-38.4z m0 81.066666h-51.2v34.133334h51.2v-34.133334z m98.133333 0h-51.2v34.133334h51.2v-34.133334z m-25.6-196.266666l46.933334 17.066666c-8.533333 21.333333-21.333333 42.666667-29.866667 59.733334h55.466667v149.333333c-29.866667 8.533333-59.733333 25.6-81.066667 46.933333h-12.8v12.8c-21.333333 21.333333-38.4 42.666667-46.933333 68.266667H469.333333v-46.933333h110.933334v-34.133334h-93.866667V413.866667h55.466667c-8.533333-21.333333-21.333333-42.666667-34.133334-55.466667l42.666667-12.8c12.8 17.066667 25.6 38.4 34.133333 59.733333l-29.866666 12.8h64c8.533333-29.866667 21.333333-55.466667 29.866666-81.066666z m-200.533333 21.333333v140.8h-85.333333l-8.533334 64h93.866667c0 81.066667-4.266667 132.266667-8.533333 157.866667-4.266667 25.6-29.866667 42.666667-72.533334 42.666666h-38.4l-12.8-46.933333c12.8 0 25.6 4.266667 38.4 4.266667 21.333333 0 34.133333-8.533333 38.4-21.333334 4.266667-12.8 4.266667-46.933333 4.266667-93.866666h-85.333333l12.8-145.066667h76.8V401.066667h-85.333334v-42.666667h132.266667z" fill="#FFFFFF" p-id="1839"></path><path d="M921.6 362.666667c-12.8-76.8-76.8-132.266667-153.6-136.533334-38.4 0-72.533333-4.266667-102.4-4.266666l51.2-68.266667c17.066667-21.333333 8.533333-51.2-12.8-64-21.333333-12.8-51.2-8.533333-64 12.8L558.933333 213.333333s-4.266667 4.266667-4.266666 8.533334h-34.133334-4.266666-55.466667c0-4.266667 0-4.266667-4.266667-8.533334L379.733333 102.4c-12.8-21.333333-42.666667-25.6-64-12.8s-25.6 42.666667-12.8 64l46.933334 68.266667c-29.866667 0-59.733333 0-93.866667 4.266666-76.8 4.266667-140.8 59.733333-149.333333 136.533334-8.533333 46.933333-12.8 106.666667-12.8 174.933333 0 81.066667 4.266667 153.6 12.8 213.333333 12.8 72.533333 72.533333 128 149.333333 132.266667 81.066667 4.266667 166.4 4.266667 260.266667 4.266667 17.066667 0 34.133333-12.8 34.133333-34.133334 0-17.066667-12.8-34.133333-34.133333-34.133333-89.6 0-174.933333 0-256-4.266667C213.333333 810.666667 179.2 780.8 170.666667 733.866667c-8.533333-55.466667-12.8-123.733333-12.8-204.8 0-64 4.266667-119.466667 8.533333-166.4 8.533333-34.133333 46.933333-68.266667 93.866667-72.533334h64l85.333333-4.266666h204.8l85.333333 4.266666h64c46.933333 0 85.333333 34.133333 89.6 81.066667 4.266667 42.666667 8.533333 98.133333 8.533334 166.4 0 17.066667 12.8 34.133333 34.133333 34.133333 17.066667 0 34.133333-12.8 34.133333-34.133333 4.266667-68.266667 0-128-8.533333-174.933333z" fill="#FFFFFF" p-id="1840"></path></svg>
                    <svg t="1606798647333" v-show="danmu" @click="danmu=!danmu" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1582" width="200" height="200"><path d="M926.293333 362.666667c-11.093333-75.946667-75.093333-133.546667-152.32-136.106667-37.973333-1.28-73.813333-2.56-107.52-3.413333l49.066667-67.84c15.36-20.906667 10.666667-50.346667-10.666667-65.706667-20.906667-15.36-50.346667-10.666667-65.706666 10.666667l-80.213334 110.933333c-2.133333 2.986667-3.84 6.4-5.12 9.386667h-39.68c-16.64 0-34.56 0-53.76 0.426666-1.28-2.986667-2.56-5.546667-4.266666-8.106666l-74.24-110.933334c-14.506667-21.333333-43.52-27.306667-65.28-12.8-21.333333 14.506667-27.306667 43.52-12.8 65.28L349.866667 223.573333c-29.013333 0.853333-59.306667 1.706667-91.733334 2.986667-76.8 2.56-140.8 59.733333-151.893333 136.106667-6.826667 47.36-10.24 105.813333-10.24 174.08 0 81.92 5.12 153.173333 14.506667 212.906666 11.946667 73.386667 74.666667 129.28 149.333333 133.12 79.786667 3.84 166.826667 5.973333 258.56 5.973334 17.493333 0 32-14.506667 32-32s-14.506667-32-32-32c-90.88 0-176.64-2.133333-255.573333-5.973334-44.8-2.133333-82.346667-35.413333-89.6-79.36-8.96-55.893333-13.653333-124.16-13.653334-202.666666 0-65.28 3.413333-120.746667 9.386667-164.693334 6.4-45.653333 44.8-79.786667 90.88-81.066666 57.173333-2.133333 109.226667-3.413333 155.733333-4.266667h4.266667c35.413333-0.853333 67.413333-0.853333 96-0.853333 22.613333 0 47.36 0.426667 74.24 0.853333 2.133333 0.426667 4.266667 0.426667 6.826667 0.426667 1.706667 0 3.413333 0 5.12-0.426667 49.92 0.853333 106.666667 2.56 169.386666 4.693333 46.08 1.706667 84.48 35.84 90.88 81.066667 4.266667 29.866667 7.253333 65.28 8.533334 104.96 0.426667 17.493333 14.933333 30.72 32 30.72h1.28c17.493333-0.426667 31.573333-15.36 30.72-33.28-0.853333-42.666667-3.84-80.213333-8.533334-112.213333z" fill="#ffffff" p-id="1583"></path><path d="M673.706667 452.266667h-52.906667v37.973333h52.906667V452.266667z m-100.266667 0h-50.346667v37.973333h50.346667V452.266667z m0 77.226666h-50.346667v35.84h50.346667v-35.84z m100.266667 0h-52.906667v35.84h52.906667v-35.84z m-25.6-193.28l45.653333 16.213334c-9.386667 22.186667-20.053333 41.813333-31.573333 59.306666h53.76V605.866667h-95.573334v35.413333H733.866667v44.8l-0.426667 0.426667h-113.066667l-0.426666-0.426667c-29.013333-31.146667-77.653333-33.28-109.226667-4.266667l-4.693333 4.693334h-43.52v-45.226667h110.08V605.866667h-93.44V411.733333h55.466666c-10.666667-21.76-22.186667-40.533333-34.56-57.173333l43.946667-14.933333c12.8 18.346667 24.746667 37.973333 34.133333 58.88l-29.013333 12.8h64c13.653333-23.04 24.746667-48.64 34.986667-75.093334z m-198.826667 20.48v142.08H366.08l-6.4 62.293334H452.266667c0 79.36-2.986667 132.266667-7.253334 159.146666-5.546667 26.88-29.013333 41.386667-71.253333 44.373334-11.946667 0-23.893333-0.853333-37.12-1.706667L324.266667 718.08c11.946667 1.28 25.173333 2.133333 37.973333 2.133333 23.04 0 36.266667-7.253333 39.253333-22.186666 3.413333-14.933333 5.12-46.506667 5.12-95.573334H310.186667l12.8-144.64H401.066667v-59.733333H314.453333v-40.96h134.826667z" fill="#ffffff" p-id="1584"></path><path d="M682.666667 906.666667c-8.96 0-17.493333-3.84-23.466667-10.24L547.84 776.533333c-11.946667-12.8-11.093333-33.28 1.706667-45.226666s33.28-11.093333 45.226666 1.706666l88.32 95.146667 225.706667-238.506667c11.946667-12.8 32.426667-13.226667 45.226667-1.28 12.8 11.946667 13.226667 32.426667 1.28 45.226667l-249.173334 263.253333c-6.4 6.4-14.506667 9.813333-23.466666 9.813334z" fill="#fb7299" p-id="1585"></path></svg>
                </span>
                <span class="iconfont icon-icon_quanping_nor" v-if='!zoom' @click="zoom=!zoom"></span>
                <span class="iconfont icon-icon_suoxiao_nor" v-else @click="zoom=!zoom"></span>
            </div>
            <Dm ref='Dm' :dm='dm' :fontsize='16' :showtime='5000' v-if="danmu"></Dm>
        </div>
    </div>
</template>

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
import vue from 'vue/dist/vue.js'
import Dm from './Dm';
import MyProgress from './MyProgress.vue';

export default {
    components: {
        MyProgress ,
        Dm
    },
    data(){
        return{
            data:{},
            play:false,
            danmu:false,
            currentTime:0,
            lengthshow:true,
            toolshow:false,
            length:0,
            dm:[],
            ended:false,
            zoom:false,
            timeout:setTimeout(()=>{})
        }
    },
    props:[
        'aid',
        'cid',
        'poster',
        'bvid',
        'fulllength',
        'last'

    ],
    watch:{
        currentTime(now,old){
            this.ended=false
            if(this.danmu){
                this.$refs.Dm.setShowDm(now,old)
            }
            if(document.getElementsByTagName('video')[0].ended){
                this.ended=true
            }
        },
        play(now){
            this.lengthshow=false
            var video=document.getElementsByTagName('video')[0]
            var that=this
            if(now==true){
                video.addEventListener('timeupdate',function(){
                    that.currentTime=this.currentTime
                })
                video.play()
                this.$refs.Dm.pause=false
            }
            else{
                video.pause()
                // window.clearInterval(dmplay)
                // cancelAnimationFrame(dmplay)
                this.toolshow=true
                this.$refs.Dm.pause=true
            }
        },
        zoom(){
            setTimeout(()=>this.$refs.Dm.resize(),500)
        }
    },
    methods:{
        replay(){
            document.getElementsByTagName('video')[0].currentTime=0
            document.getElementsByTagName('video')[0].play()
        },

        spot(){
            var timebar=this.$refs.timebar
            var that=this
            timebar.addEventListener('touchmove',this.spotmove)
            timebar.addEventListener('mousemove',this.spotmove)
            timebar.addEventListener('mouseup',function(){
                timebar.removeEventListener('mousemove',that.spotmove)
                console.log(999)
            })
            timebar.addEventListener('mouseleave',function(){
                timebar.removeEventListener('mousemove',that.spotmove)
                console.log(999)
            })
        },
        spotmove(){
            var left=event.touches?event.touches[0].clientX:event.clientX
            console.log(left)
            this.currentTime=(left-this.$refs.timebar.offsetLeft)/this.$refs.timebar.offsetWidth*this.data.durl[0].length/1000
            document.getElementsByTagName('video')[0].currentTime=this.currentTime
            
        },

        setToolShow(){
            clearTimeout(this.timeout)
            this.toolshow=!this.toolshow
            if(this.toolshow==true){
                this.timeout=setTimeout(() => {
                    this.toolshow=false
                }, 3000);
            }
        },

        intToTime(d){
            var s=''
            d=Number(d).toFixed(0)
            s=':'+(d%60<10?('0'+d%60):d%60)
            d=parseInt(d/60)
            if(d<10){
                s='0'+d+s
            }
            else{
                s=d+s
            }
            return s
        },
        getData(){
            this.$axios.get('/static/x/player/playurl',{params:{
                cid:this.cid,
                avid:this.aid,
                bvid:this.bvid,
                platform:'html5',
                otype:'json',
                qn:16,
                type:'mp4',
                html5:1
            }}).then(res=>{
                this.data=res.data.data
                this.length=(this.data.durl[0].length/1000).toFixed(0)
            })
        },
        getDm(){
            this.$axios.get('/static/x/v1/dm/list.so?oid='+this.cid).then(res=>{
                var re=/<\?xml.*source>/
                var se=/p=".*?</
                var dm=res.data.replace(re,'').replace('</d></i>','').replace('<d ','').split('</d><d ')
                this.dm=new Array(dm.length)
                for(var i=0;i<dm.length;i++){
                    this.dm[i]=new Object()
                    this.dm[i].p=dm[i].replace(/">.*/,'').replace('p="','').split(',')
                    this.dm[i].text=dm[i].replace(/.*>/,'')
                }
            })
        }
    },
    mounted(){
        this.getData()
        this.getDm()
        console.log(this.data)
    }
}

</script>

<style lang='less' scoped>
@import '../../assets/css/common';
@import '../../assets/css/iconfont';
.zoom{
    position:fixed;
    z-index: 999;
    height: 100vh !important;
    top:0;
    bottom: 0;
}
.player{
    width: 100vw;
    height: 100vw * 9 / 16;
    overflow: hidden;
    .wrap{
        width: 100%;
        height: 100%;
        position: relative;
        .ended{
            height: 100%;
            position:absolute;
            width: 100%;
            display: flex;
            background-color: #333;
            z-index: 111;
            align-items: center;
            justify-content: space-around;
            box-sizing: border-box;
            padding:0 3rem;
            span,a{
                color: #fff;
                display: flex;
                width: fit-content;
                flex-direction: column;
                align-items: center;
                &::before{
                    padding-bottom: 1rem;
                    font-size: 5rem;
                    color: #999;
                }
            }
        }
        .tools{
            background-image: linear-gradient(to top,rgba(0,0,0,0.7),rgba(0,0,0,0));
            padding: 0.6rem 0;
            position: absolute;
            z-index: 99;
            height: fit-content;
            display: flex;
            bottom: 0;
            width: 100%;
            align-items: center;
            .spot{
                height: 1.3rem;
                width: 1.3rem;
                max-height: 24px;
                max-width:24px;
                position: absolute;
                transform: translateX(-50%);
                height: 100%;
            }
            .timebar{
                flex: 1;
                margin: 0 0.5rem;
                position: relative;
                display: flex;
                height: 100%;
                align-items: center;
            }
            .current{
                font-size: 1.2rem;
            }
            span {
                font-size: 1.5rem;
                color: #fff;
                padding:0 1rem;
                svg{
                    width: 1.9rem;
                    height: 1.9rem;
                    margin-top: 0.3rem;
                }
            }
        }
        .length{
            position:absolute;
            bottom: 1.3rem;
            left:1.1rem;
            color: #fff;
            background-color:rgba(0, 0, 0, 0.3);
            font-size: 1.05rem;
            font-family: "iconfont" !important;
            padding: 0.1rem 0.4rem;
            border-radius: 0.3rem;
        }
        .preview{
            position: absolute;
            color: #fff;
            font-size: 4.5rem;
            z-index: 99;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
        }
        video{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
    }
}

</style>